<template>
    <el-container v-if="!articleEditor">
        <el-aside class="animate__flipInY beautiful">
            <button @click="toggleCalendar" class="button">
                <ArrowLeftRight class="icon" />
            </button>
            <button class="button" @click="markEditor()">
                <SquarePen class="icon" />
            </button>
            <TodayInfo v-if="oneCalendar" class="animate__flipInY daily" />
            <Calendar v-if="!oneCalendar" class="animate__flipInY daily calendar" :setSelectDate="setSelectDate">
            </Calendar>
            <!-- <el-card class="hot">
                最近热搜
                <ul>
                    <li v-for="item in 5" :key="item">
                        {{ item }}
                    </li>
                </ul>
            </el-card> -->
        </el-aside>

        <el-main>
            <MarkPreview :dailyLog="dailyLog" />
        </el-main>

        <el-aside class="daily-log-aside">
            <YearProgress />
            <HistoricalToday />
        </el-aside>
    </el-container>

    <el-container v-else>
        <el-main>
            <!-- <button class="button" @click="markEditor()">
                <Undo2 />
            </button> -->
            <MarkEditor @back="markEditor" />
        </el-main>
    </el-container>
</template>

<script setup lang="ts" name="Article">
import DailyLogs from '@/components/dailyLog/DailyLogs.vue';
import TodayInfo from '@/components/dailyLog/TodayInfo.vue';
import ArticleCard from '@/components/utils/ArticleCard.vue';
import Calendar from '@/components/utils/Calendar.vue';
import MarkEditor from '@/components/utils/MarkEditor.vue';
import { ref, onMounted, provide, reactive } from 'vue'
import { ArrowLeftRight, SquarePen, Undo2 } from 'lucide-vue-next';
const value = ref(new Date())
let oneCalendar = ref(true)
let selectDate = ref(new Date())
let articleEditor = ref(false)
const dailyLog = reactive({
    theme: 'dark',
    text: '## 今天还没有日记哦',
    id: 'my-editor',
});

provide('selectDate', selectDate)

function markEditor() {
    articleEditor.value = !articleEditor.value
}

function setSelectDate(date: Date) {
    selectDate.value = date
}
function getLogDate(dateString: string) {

}

const dateList = ref([
    "2025-02-01",
])

function toggleCalendar() {
    oneCalendar.value = !oneCalendar.value
    setTimeout(() => {
        if (!oneCalendar.value) {
            oneCalendar.value = !oneCalendar.value
        }
    }, 10000);
}
</script>

<style scoped lang="scss">
.button {
    background: none;
    border: none;
    padding: 4px;
    margin-right: 8px;
    cursor: pointer;
    color: #666;

    &:hover {
        color: #4185F4;
    }

    .icon {
        width: 16px;
        height: 16px;
    }
}

.el-container {
    width: 100%;
    margin-top: 0.5%;
}

.el-aside {
    // width: 20%;
    height: 100vh;
    text-align: center;
    background-color: rgba($color: #ffffff, $alpha: 0.2);
}

.hot {
    width: 100%;
}

.daily {
    // background-color: #333;
    width: 90%;
    margin-top: 2%;
    // height: 70%;

    // height: 120px;
    .calendar {
        // display: none;
        transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);

        &:hover {
            height: 100%;
        }
    }
}

.is_selected {
    color: red;
    background-color: aqua;
}

.no_selected {
    color: black;
}

.el-header {
    --el-header-padding: 0 0px;
    --el-header-height: auto;
}

.el-main {
    --el-main-padding: 0 0px;
    --el-main-height: auto;
    width: 50%;
}

.main-content {
    padding: 20px;
}
</style>